<template>
	<view>
		<uni-popup ref="checkedCard" type="bottom" zindex>
			<view class="modelcon">
				<view class="m_tit">请选择电子卡</view>
				<scroll-view scroll-y="true" class="scrbx">
					<view>
						<view class="m_list" v-for="(item,index) in cardList" :key="index" @click="choseCard(item,index)">
							<view class="is_default">
								<view class="default_text" v-if="item.is_default=='5'">默</view>
							</view>
							<!-- <view class="cardName">卡{{index+1}}</view> -->
							<view class="cardName margin-left-sm flex-sub">{{plusXing(item.phone,3,4)}}</view>
							<view class="cardPri flex-sub padding-right-xs text-cut">¥{{item.amount}}</view>
							<!-- <view class="cardIco"> 
							</view> -->
							<text class="text-xl" :class="navClass==index?'cuIcon-roundcheckfill text-ngreen':'cuIcon-round text-c9'"></text>
						</view>
					</view>
				</scroll-view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { showLoading, hideLoading,plusXing } from '@/utils/helper';
	import { getCardList } from '@/api/vmeitime-http/index.js';
	
	const props = defineProps({
		selctCardId: {
			type: String,
			default: ''
		}
	});
	const emit = defineEmits(["choseCad"])
	const checkedCard = ref()
	const cardList = ref<any>([
		// {
		// 	cardName:"卡1",
		// 	cardNum:"150***0026",
		// 	cardPrice:"666.6",
		// 	isDefault:true,
		// 	checked:false
		// },{
		// 	cardName:"卡2",
		// 	cardNum:"138***2271",
		// 	cardPrice:"222.3",
		// 	isDefault:false,
		// 	checked:true
		// },{
		// 	cardName:"卡3",
		// 	cardNum:"150***8873",
		// 	cardPrice:"0.6",
		// 	isDefault:false,
		// 	checked:false
		// }
	])
	const loaded = ref(false);
	const navClass = ref(null);
	const open = () => {
		if(!loaded.value){
			return
		}
		checkedCard.value.open();
	}
	const initData = async (source : any = '') => {
		try {
			source == 'open' && showLoading();
			let res = await getCardList();
			source == 'open' && hideLoading();
			loaded.value = true;
			let rcard:any={curCard:null,hasCard:false,source:source};
			if (res.result && res.object) {
				cardList.value = res.object || [];
				if (source == 'init'&&cardList.value.length>0) {
					let index = cardList.value.findIndex(item => (props.selctCardId?item.card_no==props.selctCardId:item.is_default == '5'));
					navClass.value = index >= 0 ? index : 0;
					rcard.curCard = cardList.value[index];
				}
				rcard.hasCard = cardList.value.length>0;
				source == 'open' && open();
			}
			emit("choseCad",rcard)
		} catch (e) {
			source == 'open' && hideLoading();
		}
	}
	const close = () => {
		checkedCard.value.close()
	}
	// 选卡
	const choseCard = (item : any, index : any) => {
		// for (let i in cardList.value) {
		// 	cardList.value[i].checked = false;
		// }
		// cardList.value[index].checked = true;
		navClass.value = index;
		// item.name = '卡' + (index+1);
		let r:any = {curCard:item,hasCard:true,source:''};
		emit("choseCad",r)
		close()
	}
	defineExpose({ open, close, initData })
</script>

<style lang="scss" scoped>
	.modelcon {
		width: 100%;
		min-height: 500rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0rpx 40rpx 20rpx 40rpx;

		.m_tit {
			width: 100%;
			height: 130rpx;
			border-bottom: 2rpx solid #F3F3F3;
			line-height: 110rpx;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 40rpx;
			font-weight: 700;
		}

		.m_list {
			width: 100%;
			height: 100rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding: 0rpx 20rpx 0rpx 20rpx;

			.is_default {
				width: 40rpx;
				height: 40rpx;

				.default_text {
					border-radius: 8rpx;
					background: rgba(86, 191, 122, 0.28);
					line-height: 40rpx;
					text-align: center;
					color: #53A87F;
					font-family: "Microsoft YaHei UI";
					font-size: 28rpx;
					font-weight: 400;
				}
			}

			.cardName {
				margin-left: 15rpx;
				color: #666;
				font-size: 32rpx;
			}

			.cardPri {
				font-size: 32rpx;
			}

			// .cardIco {
			// 	position: absolute;
			// 	right: 20rpx;
			// 	top: 27rpx;
			// 	font-size: 40rpx;
			// }
		}
	}
	.scrbx{
		width: 100%;
		min-height: 300rpx;
		max-height: 80vh;
	}
</style>